<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Bootstrap 的 CSS 文件 -->
  {# <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"> #}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <!-- 规范化样式 的 CSS 文件 -->
  {# <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"> #}

  <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
  {# <link rel="stylesheet" href="../static/main.css"> #}

  {% if title %}
    <title>Flask Blog - {{ title }}</title>
  {% else %}
    <title>Flask Blog</title>
  {% endif %}
</head>
<body>
    <!-- 导航栏 -->
    <header class="site-header">
      <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
        <div class="container">
          <a class="navbar-brand mr-4" href="/">Flask Blog</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarToggle">
            <div class="navbar-nav mr-auto">
              <a class="nav-item nav-link" href="{{ url_for('main.home') }}">Home</a>
              {% if current_user.username == 'admin' %}
                <a class="nav-item nav-link" href="{{ url_for('users.admin_get_users') }}">Users</a>
              {% endif %}
              <a class="nav-item nav-link" href="{{ url_for('main.about') }}">About</a>
            </div>
            <!-- Navbar Right Side -->
            <div class="navbar-nav">
              {% if current_user.is_authenticated %}
                <a class="nav-item nav-link" href="{{ url_for('posts.new_post') }}">New Post</a>
                <a class="nav-item nav-link" href="{{ url_for('users.account') }}">Account</a>
                <a class="nav-item nav-link" href="{{ url_for('users.logout') }}">({{current_user.username}})Logout</a>
              {% else %}
                <a class="nav-item nav-link" href="{{ url_for('users.login') }}">Login</a>
                <a class="nav-item nav-link" href="{{ url_for('users.register') }}">Register</a>
              {% endif %}
            </div>
          </div>
        </div>
      </nav>
    </header>
    <!-- 内容区 -->
    <main role="main" class="container">
      <div class="row">
        <div class="col-md-8">
          <!-- 提示信息 -->
          {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
              {% for category, message in messages %}
                <div class="alert alert-{{ category }}">
                  {{ message }}
                </div>
              {% endfor %}
            {% endif %}
          {% endwith %}
          <!-- 内容 -->
          {% block content %}{% endblock %}
        </div>
        <!-- 右侧导航 -->
        <div class="col-md-4">
          <div class="content-section">
            <h3>友情链接</h3>
            <p class='text-muted'>常用网站.
              <ul class="list-group">
                <li class="list-group-item list-group-item-light"><a href="https://v4.bootcss.com/docs/">bootstrap 4.6 doc</a></li>
                <li class="list-group-item list-group-item-light"><a href="https://dormousehole.readthedocs.io/en/latest/quickstart.html">flask2 doc</a></li>
                <li class="list-group-item list-group-item-light"><a href="https://github.com/CoreyMSchafer/code_snippets/tree/master/Python/Flask_Blog">source code</a></li>
                <li class="list-group-item list-group-item-light"><a href="https://gitee.com/zevsee/flask-blog">gitee</a></li>
              </ul>
            </p>
          </div>
        </div>
      </div>
    </main>

  <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
    <!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
    {# <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> #}
    {# <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script> #}
    
    <!-- 选项 2：单独引入 -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<

</body>
</html>